/***** MOBILE FIRST CC******/

/*----Navigationsmenu------*/
nav {
  background: #141850;
  text-transform: uppercase;
  letter-spacing:1px;
  width: 100%;
  
}
nav ul {
  padding: 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  list-style-type: none;
}
nav a {
  color: #ed7966;
  text-decoration: none;
  text-align: center;
  display: block;
  padding: 10px;
  list-style-type: none;
  font-size: clamp(1rem, 0.91rem + 0.44vw, 1.2rem);
}
nav li:hover {
  background-color: #303179;
}
nav li {
  font-size: 16px;
  padding: 15px 5px;
  white-space: nowrap;
}
/*----basic styles------*/
*{
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  margin: 0;
}

body {
  font-size: clamp(1rem, 0.91rem + 0.44vw, 1.2rem);
}

.wrapper{
  width: 100%;
  margin: 0 auto;
}
.flex-container_foot{
  width: 100%;
  min-height: 73px;
  background-color: #141850;
}
/*----Kontaktdaten mit Bild------*/
.flex-container_contact {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  background-size: cover;
  background-image: url("../images/banner.jpg");
  height: 500px;
}
.flex-item-pic{
  height: 223px;  
}
.profilbild {
  border-radius: 20px;
  margin-bottom: 10px;
}

.flex-item_contact {
  background-color:#141850;
  color: #f5cac2 ;
  padding: 10px;
  margin: 10px;
  border-radius: 20px;
}

.flex-item_contact a{
  color: #f5cac2 ;
  text-decoration: none;
}
.flex-item_contact a:hover{
  color: #ed7966 ;
  text-decoration: none;
}

/*----CV Inhalt------*/
.flex-container_CV {
  display: flex;
  flex-direction: column;
  background-color: #f5cac2;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.flex-item_CV_content {
  background-color: #fae5df;
  justify-content: center;
  border-radius: 20px;	
  color: #141850;
  display: flex;
  width: 95%;
  flex-shrink: 1;
  flex-wrap:wrap;
  margin-bottom: 30px;
}

.flex-item_CV_title {
  background-color: #f5cac2;
  display: flex;
  color: #303179 ;
  justify-content: center;
  width: 95%;
  margin-top: 10px;
}
.flex-item_me{
  width: 100%;
  padding: 10px;   
}

.flex-item_1 {
  padding-top: 10px;
  text-align: center;
  width: 100%;
 }
 
 .flex-item_2 {
  width: 70%;
  padding-bottom: 10px;
 }
 
 .flex-item_3 {
  margin:auto;
  padding-top: 10px;
  text-align: center;
  width: 100%;
 }
 .flex-item_4 {
    width: 70%;
    margin:auto;
    padding-bottom: 10px;
 }

.flex-item_CV_content2 {
  background-color: #fae5df;
  flex-wrap: wrap;	
  color: #141850;
  display: flex;
  justify-content:center;
  text-align: center;
  width: 100%;
}

/*----Skills Button------*/
.flex-item-button {
  width: 100%;
  margin: 10px;
  padding: 10px;
  background-color: #141850;
  color: #f5cac2;
  text-align: center;
  justify-content: center;
  border-radius: 20px;
}
.skill { 
  background-color: #ed7966;
  color: white; 
  text-align: center; 
  font-size: 15px; 
  border-radius: 15px; 
} 
.deutsch { 
  width: 100%; 
} 
.englisch {
  width: 66.6%;
}
.franz {
  width: 16.6%;
}

/*----Scroll on Top Button------*/
#myBtn {
  display: none; 
  position: fixed; 
  bottom: 20px; 
  right: 30px; 
  z-index: 99;
  border: none;
  outline: none; 
  background-color: #141850; 
  border-color: #ed7966;
  border-style:outset ;
  color: #ed7966; 
  cursor: pointer; 
  padding: 15px;
  border-radius: 10px;
  font-size: 18px; 
}
/*----medium screen------*/
@media only screen and (min-width: 768px) and (max-width: 1023px){

  nav {
    position: sticky;
    top: 0;
  }
  nav ul{
    flex-direction: row;
  }

  .flex-item_CV_content{
    width: 95%;
    min-height: 80px;
    flex-wrap: nowrap;
    
  }
  .flex-item_CV_content2{
    width: 100%;
    min-height: 80px;

  }
  .flex-item-button {
    width: 40%;
  }
  .flex-item_1{
    min-width: 250px;
    width: 30%;
    padding: 10px;   
  }
  .flex-item_2{
    width: 70%;
    padding: 10px;
    
  }
  .flex-item_3{
    padding: 0;
    min-width: 250px;
    width: 30%;
    padding: 10px;
  }
  .flex-item_4{
    padding: 0;
    width: 70%;
  }
}

/*----big screen------*/
@media only screen and (min-width: 1024px ) {

  nav {
    position: sticky;
  top: 0;
  }
  nav ul{
    flex-direction: row;
  }

  .flex-item_CV_content{
    width: 60%;
    min-height: 80px;
    flex-wrap: nowrap;
    
  }
  .flex-item_CV_content2{
    width: 100%;
    min-height: 80px;

  }
  .flex-item-button {
    width: 15%;
  }
  
  .flex-item_1{
    min-width: 250px;
    width: 25%;
    padding: 10px;   
  }
  .flex-item_2{
    width: 70%;
    padding: 10px;
    
  }
  .flex-item_3{
    padding: 0;
    min-width: 250px;
    width: 30%;
    padding: 10px;
  }
  .flex-item_4{
    padding: 0;
    width: 70%;
  }
}